<template>
  <el-drawer
    :close-on-press-escape="false"
    v-model="visible"
    size="100%"
    title="详细信息"
    :with-header="false"
    @close="handleClose"
  >
    <div class="station-drawer">
      <div class="map-box">
        <StationMap ref="stationMapRef" @location="handleLocation" />
      </div>
      <div class="form-box">
        <div class="form-header">
          <h4>详细信息</h4>
          <div class="buttons" v-if="pageType == 'edit' || pageType == 'add'">
            <el-button plain @click="handleEdit(null)">取消</el-button>
            <el-button type="primary" @click="onSubmit">保存</el-button>
          </div>
          <div class="buttons" v-else-if="pageType == 'view'">
            <el-tooltip content="编辑" placement="top">
              <el-button
                v-if="auditType == 0"
                type="primary"
                icon="Edit"
                circle
                @click="handleEdit('edit')"
              />
            </el-tooltip>
            <el-tooltip content="删除" placement="top">
              <el-button
                v-if="auditType == 0"
                type="danger"
                icon="Delete"
                circle
                @click="handleDelete"
              />
            </el-tooltip>
            <el-button plain @click="handleClose">关闭</el-button>
          </div>
        </div>
        <div style="flex: 1">
          <el-tabs type="card" style="height: 100%">
            <el-tab-pane label="站点信息" style="height: 100%">
              <el-form
                :model="formData"
                size="small"
                inline
                :disabled="pageType == 'view'"
              >
                <div class="station-info">
                  <!-- 第一段 -->
                  <div class="title">基础信息</div>
                  <div class="panel">
                    <div class="" style="width: 45%">
                      <div class="flex">
                        <!-- class="hasUpdate" -->
                        <el-input
                          v-model="formData.alias_name"
                          :class="{
                            hasUpdate: changedFields.includes('alias_name'),
                          }"
                          placeholder="输入站点名称"
                          style="width: 120px"
                          size="small"
                        ></el-input>
                        <span>服务时间：</span>
                        <el-input-number
                          v-model="formData.service_hours"
                          :class="{
                            hasUpdate: changedFields.includes('service_hours'),
                          }"
                          :min="null"
                          :max="99"
                          :step="1"
                          :precision="0"
                          style="width: 90px"
                          :controls="false"
                          placeholder="时间(h)"
                        />
                      </div>
                      <!-- 图片 -->
                      <div
                        class="carousel-box"
                        :class="{
                          hasUpdate: changedFields.includes('photos'),
                        }"
                      >
                        <el-upload
                          v-model:file-list="formData.photos"
                          class="avatar-uploader"
                          :action="`${baseUrl}/upload/index`"
                          :show-file-list="false"
                          multiple
                          :limit="10"
                          :on-success="handleAvatarSuccess"
                        >
                          <img
                            class="img"
                            src="@/assets/images/icon/upload.png"
                            alt=""
                          />
                        </el-upload>
                        <!-- 删除 -->
                        <el-carousel :interval="5000" arrow="always">
                          <el-carousel-item
                            height="200px"
                            v-for="item in formData.photos"
                            :key="item.uid"
                          >
                            <img style="width: 100%" :src="item.url" alt="" />
                            <el-button
                              class="delete-btn"
                              type="danger"
                              icon="Delete"
                              circle
                              @click="handleDeletePhoto(item)"
                            />
                          </el-carousel-item>
                        </el-carousel>
                      </div>
                    </div>
                    <div style="margin-left: 12px; width: 32%">
                      <el-form-item label="站点属性">
                        <el-select
                          v-model="formData.attribute"
                          placeholder="请选择"
                          :class="{
                            hasUpdate: changedFields.includes('attribute'),
                          }"
                        >
                          <el-option
                            v-for="item in attributeOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          />
                        </el-select>
                      </el-form-item>
                      <el-form-item label="所属街道">
                        <el-select
                          v-model="formData.street_id"
                          placeholder="请选择"
                          :class="{
                            hasUpdate: changedFields.includes('street_id'),
                          }"
                          @change="handleStreetChange"
                        >
                          <el-option
                            v-for="item in streetOptions"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                          />
                        </el-select>
                      </el-form-item>
                      <el-form-item label="居委区域编号">
                        <el-select
                          v-model="formData.committee_id"
                          placeholder="请选择"
                          :class="{
                            hasUpdate: changedFields.includes('committee_id'),
                          }"
                        >
                          <el-option
                            v-for="item in committeeOptions"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                          />
                        </el-select>
                      </el-form-item>
                      <el-form-item label="地址">
                        <el-input
                          v-model="formData.address"
                          :class="{
                            hasUpdate: changedFields.includes('address'),
                          }"
                        >
                          <template #suffix>
                            <img
                              @click.stop="handleFindAddress"
                              style="width: 16px; cursor: pointer"
                              src="@/assets/images/icon/dingwei_icon.png"
                              alt=""
                            />
                          </template>
                        </el-input>
                      </el-form-item>
                      <el-form-item label="所有归属权">
                        <el-select
                          v-model="formData.ownership"
                          placeholder="请选择"
                          :class="{
                            hasUpdate: changedFields.includes('ownership'),
                          }"
                        >
                          <el-option
                            v-for="item in ownershipOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          />
                        </el-select>
                      </el-form-item>
                      <el-form-item label="类型">
                        <el-select
                          v-model="formData.type"
                          placeholder="请选择"
                          :class="{
                            hasUpdate: changedFields.includes('type'),
                          }"
                        >
                          <el-option
                            v-for="item in typeOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          />
                        </el-select>
                      </el-form-item>
                      <el-form-item label="启用日期">
                        <el-select
                          v-model="formData.implement_date"
                          placeholder="请选择"
                          :class="{
                            hasUpdate: changedFields.includes('implement_date'),
                          }"
                        >
                          <el-option
                            v-for="item in yearOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          />
                        </el-select>
                      </el-form-item>
                      <el-form-item label="公共厕所类型">
                        <el-select
                          v-model="formData.toilet_relation"
                          placeholder="请选择"
                          :class="{
                            hasUpdate:
                              changedFields.includes('toilet_relation'),
                          }"
                        >
                          <el-option
                            v-for="item in toiletRelationOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          />
                        </el-select>
                      </el-form-item>
                      <el-form-item label="公共厕所等级">
                        <el-select
                          v-model="formData.toilet_level"
                          placeholder="请选择"
                          :class="{
                            hasUpdate: changedFields.includes('toilet_level'),
                          }"
                        >
                          <el-option
                            v-for="item in toiletLevelOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          />
                        </el-select>
                      </el-form-item>
                      <el-form-item label="开放时间段">
                        <div class="time-range-input">
                          <el-time-picker
                            v-model="startTime"
                            format="HH:mm"
                            value-format="HH:mm"
                            placeholder="开始时间"
                            @change="handleTimeChange"
                            style="width: 90px"
                            :class="{
                              hasUpdate:
                                changedFields.includes('service_time_range'),
                            }"
                          />
                          <span class="time-separator">-</span>
                          <el-time-picker
                            v-model="endTime"
                            format="HH:mm"
                            value-format="HH:mm"
                            placeholder="结束时间"
                            @change="handleTimeChange"
                            style="width: 90px"
                            :class="{
                              hasUpdate:
                                changedFields.includes('service_time_range'),
                            }"
                          />
                        </div>
                      </el-form-item>
                    </div>
                    <div style="margin-left: 12px; width: 22%">
                      <el-form-item label="公共厕所造价">
                        <el-input-number
                          :min="null"
                          :class="{
                            hasUpdate: changedFields.includes('toilet_cost'),
                          }"
                          :step="0.01"
                          :precision="2"
                          :controls="false"
                          v-model="formData.toilet_cost"
                        />
                      </el-form-item>
                      <el-form-item label="公共厕所建筑面积">
                        <el-input-number
                          :min="null"
                          :class="{
                            hasUpdate: changedFields.includes('building_area'),
                          }"
                          :step="0.01"
                          :precision="2"
                          :controls="false"
                          v-model="formData.building_area"
                        />
                      </el-form-item>
                      <el-form-item label="使用情况">
                        <!-- usageStatusOptions -->
                        <el-select
                          v-model="formData.usage_status"
                          placeholder="请选择"
                          :class="{
                            hasUpdate: changedFields.includes('usage_status'),
                          }"
                        >
                          <el-option
                            v-for="item in usageStatusOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          />
                        </el-select>
                      </el-form-item>
                      <el-form-item label="公共厕所所在位置">
                        <el-select
                          v-model="formData.location_category"
                          placeholder="请选择"
                          :class="{
                            hasUpdate:
                              changedFields.includes('location_category'),
                          }"
                        >
                          <el-option label="临街" value="临街" />
                          <el-option
                            label="商场（临街）"
                            value="商场（临街）"
                          />
                          <el-option label="商场内" value="商场内" />
                          <el-option label="临菜场" value="临菜场" />
                          <el-option label="临公园" value="临公园" />
                          <el-option label="居住区内" value="居住区内" />
                          <el-option label="临居住区" value="临居住区" />
                          <el-option
                            label="绿地（临街）"
                            value="绿地（临街）"
                          />
                          <el-option label="绿地公园内" value="绿地公园内" />
                          <el-option label="交通枢纽" value="交通枢纽" />
                        </el-select>
                      </el-form-item>
                      <el-form-item label="管理形式">
                        <el-select
                          v-model="formData.management_mode"
                          placeholder="请选择"
                          :class="{
                            hasUpdate:
                              changedFields.includes('management_mode'),
                          }"
                        >
                          <el-option
                            v-for="item in managementModeOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          />
                        </el-select>
                      </el-form-item>
                      <el-form-item label="收费情况">
                        <el-select
                          v-model="formData.charging"
                          placeholder="请选择"
                          :class="{
                            hasUpdate: changedFields.includes('charging'),
                          }"
                        >
                          <el-option label="免费" value="免费" />
                          <el-option label="收费" value="收费" />
                        </el-select>
                      </el-form-item>
                      <el-form-item label="运营单位">
                        <el-select
                          v-model="formData.operator_id"
                          placeholder="请选择"
                          :class="{
                            hasUpdate: changedFields.includes('operator_id'),
                          }"
                        >
                          <el-option
                            v-for="item in operatorOptions"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                          />
                        </el-select>
                        <!-- <el-input
                          v-model="formData.operator_company"
                          placeholder="请输入"
                        /> -->
                      </el-form-item>
                      <el-form-item label="单位分类">
                        <el-select
                          v-model="formData.operator_type"
                          placeholder="请选择"
                          :class="{
                            hasUpdate: changedFields.includes('operator_type'),
                          }"
                        >
                          <el-option label="直属" value="直属" />
                          <el-option label="其他" value="其他" />
                        </el-select>
                      </el-form-item>
                      <el-form-item label="规划许可">
                        <el-select
                          v-model="formData.planning_permit"
                          placeholder="请选择"
                          :class="{
                            hasUpdate:
                              changedFields.includes('planning_permit'),
                          }"
                        >
                          <el-option label="有" value="有" />
                          <el-option label="无" value="无" />
                        </el-select>
                      </el-form-item>
                    </div>
                  </div>

                  <!-- 第二段 -->
                  <div class="title">设施信息</div>
                  <div class="panel" style="flex-direction: column">
                    <template v-if="pageType === 'view'">
                      <div class="flex">
                        <div
                          class="img-box"
                          :class="{
                            hasUpdate: changedFields.includes('male_squat'),
                          }"
                        >
                          <!-- 男蹲  -->
                          <img
                            src="@/assets/images/gonggongcesuo/blue_nan_dun_wei_shu.png"
                            alt=""
                          />
                          <span class="num">{{ formData.male_squat }}</span>
                        </div>
                        <div
                          class="img-box"
                          :class="{
                            hasUpdate: changedFields.includes('female_squat'),
                          }"
                        >
                          <!-- 女蹲 -->
                          <img
                            src="@/assets/images/gonggongcesuo/nv_dun_wei_shu.png"
                            alt=""
                          />
                          <span class="num">{{ formData.female_squat }}</span>
                        </div>
                        <div
                          class="img-box"
                          :class="{
                            hasUpdate: changedFields.includes('male_stand'),
                          }"
                        >
                          <!-- 男站位 -->
                          <img
                            src="@/assets/images/gonggongcesuo/blue_nan_zhan_wei_shu.png"
                            alt=""
                          />
                          <span class="num">{{ formData.male_stand }}</span>
                        </div>
                        <div
                          class="img-box"
                          :class="{
                            hasUpdate: changedFields.includes('male_seats'),
                          }"
                        >
                          <!-- 男座位 -->
                          <img
                            src="@/assets/images/gonggongcesuo/blue_nan_zuo_wei_shu.png"
                            alt=""
                          />
                          <span class="num">{{ formData.male_seats }}</span>
                        </div>
                        <div
                          class="img-box"
                          :class="{
                            hasUpdate: changedFields.includes('female_seats'),
                          }"
                        >
                          <!-- 女座位 -->
                          <img
                            src="@/assets/images/gonggongcesuo/blue_nv_zuo_wei_shu.png"
                            alt=""
                          />
                          <span class="num">{{ formData.female_seats }}</span>
                        </div>
                      </div>
                    </template>
                    <template v-else>
                      <div class="flex">
                        <el-form-item label="男蹲位数">
                          <el-input-number
                            :min="null"
                            :max="999"
                            :step="1"
                            :precision="0"
                            :controls="false"
                            placeholder="输入数量"
                            v-model="formData.male_squat"
                            :class="{
                              hasUpdate: changedFields.includes('male_squat'),
                            }"
                          />
                        </el-form-item>
                        <el-form-item label="女蹲位数">
                          <el-input-number
                            :min="null"
                            :max="999"
                            :step="1"
                            :precision="0"
                            :controls="false"
                            placeholder="输入数量"
                            v-model="formData.female_squat"
                            :class="{
                              hasUpdate: changedFields.includes('female_squat'),
                            }"
                          />
                        </el-form-item>
                        <el-form-item label="男站位数">
                          <el-input-number
                            :min="null"
                            :max="999"
                            :step="1"
                            :precision="0"
                            :controls="false"
                            placeholder="输入数量"
                            v-model="formData.male_stand"
                            :class="{
                              hasUpdate: changedFields.includes('male_stand'),
                            }"
                          />
                        </el-form-item>
                      </div>
                      <div class="flex" style="margin-bottom: 16px">
                        <el-form-item label="男座位数">
                          <el-input-number
                            :min="null"
                            :max="999"
                            :step="1"
                            :precision="0"
                            :controls="false"
                            placeholder="输入数量"
                            v-model="formData.male_seats"
                            :class="{
                              hasUpdate: changedFields.includes('male_seats'),
                            }"
                          />
                        </el-form-item>
                        <el-form-item label="女座位数">
                          <el-input-number
                            :min="null"
                            :max="999"
                            :step="1"
                            :precision="0"
                            :controls="false"
                            placeholder="输入数量"
                            v-model="formData.female_seats"
                            :class="{
                              hasUpdate: changedFields.includes('female_seats'),
                            }"
                          />
                        </el-form-item>
                      </div>
                    </template>
                    <div class="flex">
                      <!-- 多选 -->
                      <el-form-item label="污物处理形式">
                        <el-select
                          v-model="formData.waste_treatment"
                          multiple
                          collapse-tags
                          placeholder="请选择"
                          :class="{
                            hasUpdate:
                              changedFields.includes('waste_treatment'),
                          }"
                        >
                          <el-option
                            v-for="item in wasteTreatmentOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          />
                        </el-select>
                      </el-form-item>
                      <el-form-item label="导向标志">
                        <!-- 有 无 -->
                        <el-select
                          v-model="formData.signage"
                          placeholder="请选择"
                          :class="{
                            hasUpdate: changedFields.includes('signage'),
                          }"
                        >
                          <el-option label="有" value="有" />
                          <el-option label="无" value="无" />
                        </el-select>
                      </el-form-item>

                      <el-form-item label="通用厕所数量">
                        <el-input-number
                          :min="null"
                          :max="999"
                          :step="1"
                          :precision="0"
                          :controls="false"
                          placeholder="输入数量"
                          v-model="formData.universal_wc_count"
                          :class="{
                            hasUpdate:
                              changedFields.includes('universal_wc_count'),
                          }"
                        />
                      </el-form-item>
                      <el-form-item label="有无20分钟临停标志">
                        <el-select
                          v-model="formData.has_20min_parking_sign"
                          placeholder="请选择"
                          :class="{
                            hasUpdate: changedFields.includes(
                              'has_20min_parking_sign'
                            ),
                          }"
                        >
                          <el-option label="有" value="有" />
                          <el-option label="无" value="无" />
                        </el-select>
                      </el-form-item>
                    </div>
                    <div class="flex">
                      <el-form-item label="粪便走向">
                        <el-select
                          v-model="formData.feces_direction"
                          placeholder="请选择"
                          :class="{
                            hasUpdate:
                              changedFields.includes('feces_direction'),
                          }"
                        >
                          <el-option label="直通污水" value="直通污水" />
                          <el-option label="化粪池" value="化粪池" />
                        </el-select>
                      </el-form-item>

                      <el-form-item label="热水装置">
                        <el-select
                          v-model="formData.hot_water"
                          placeholder="请选择"
                          :class="{
                            hasUpdate: changedFields.includes('hot_water'),
                          }"
                        >
                          <el-option
                            v-for="item in hotWaterOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          />
                        </el-select>
                      </el-form-item>
                      <el-form-item label="空调配置">
                        <el-select
                          v-model="formData.air_conditioning"
                          placeholder="请选择"
                          :class="{
                            hasUpdate:
                              changedFields.includes('air_conditioning'),
                          }"
                        >
                          <el-option
                            v-for="item in airConditioningOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          />
                        </el-select>
                      </el-form-item>
                      <el-form-item label="有无通用厕间">
                        <el-select
                          v-model="formData.has_universal_wc"
                          placeholder="请选择"
                          :class="{
                            hasUpdate:
                              changedFields.includes('has_universal_wc'),
                          }"
                        >
                          <el-option label="有" value="有" />
                          <el-option label="无" value="无" />
                        </el-select>
                      </el-form-item>
                    </div>
                    <div class="flex">
                      <el-form-item label="无障碍设置">
                        <el-select
                          v-model="formData.accessible"
                          placeholder="请选择"
                          :class="{
                            hasUpdate: changedFields.includes('accessible'),
                          }"
                        >
                          <el-option label="有" value="有" />
                          <el-option label="无" value="无" />
                        </el-select>
                      </el-form-item>
                      <el-form-item label="是否为沟槽冲水">
                        <el-select
                          v-model="formData.is_trench_flush"
                          placeholder="请选择"
                          :class="{
                            hasUpdate:
                              changedFields.includes('is_trench_flush'),
                          }"
                        >
                          <el-option label="是" value="是" />
                          <el-option label="否" value="否" />
                        </el-select>
                      </el-form-item>
                      <el-form-item label="卷帘门">
                        <el-select
                          v-model="formData.roller_shutter"
                          placeholder="请选择"
                          :class="{
                            hasUpdate: changedFields.includes('roller_shutter'),
                          }"
                        >
                          <el-option
                            v-for="item in rollerShutterOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          />
                        </el-select>
                      </el-form-item>
                    </div>
                    <div class="flex">
                      <el-form-item
                        label="备注"
                        style="width: 100%; max-width: none"
                      >
                        <!-- <el-input-number
                          v-model="formData.service_time_range"
                          :min="null"
                          :max="24"
                          :step="1"
                          :precision="0"
                          :controls="false"
                        /> -->
                        <el-input
                          v-model="formData.remark"
                          placeholder="输入备注"
                          :class="{
                            hasUpdate: changedFields.includes('remark'),
                          }"
                        />
                      </el-form-item>
                    </div>
                    <div class="flex">
                      <el-form-item label="是否有第三卫生间">
                        <el-select
                          v-model="formData.has_third_wc"
                          placeholder="请选择"
                          :class="{
                            hasUpdate: changedFields.includes('has_third_wc'),
                          }"
                        >
                          <el-option label="有" value="有" />
                          <el-option label="无" value="无" />
                        </el-select>
                      </el-form-item>
                      <el-form-item
                        label="第三卫生间位置"
                        v-if="formData.has_third_wc === '有'"
                      >
                        <el-select
                          v-model="formData.third_wc_location"
                          placeholder="请选择"
                          clearable
                          :class="{
                            hasUpdate:
                              changedFields.includes('third_wc_location'),
                          }"
                        >
                          <el-option label="独立" value="独立" />
                          <el-option label="公厕内" value="公厕内" />
                        </el-select>
                      </el-form-item>
                    </div>
                    <div v-if="formData.has_third_wc === '有'">
                      <el-form-item
                        label="第三卫生间具体设施"
                        style="width: 100%; max-width: none"
                      >
                        <el-input
                          v-model="formData.third_wc_detail"
                          placeholder="请输入具体设施"
                          :class="{
                            hasUpdate:
                              changedFields.includes('third_wc_detail'),
                          }"
                        ></el-input>
                      </el-form-item>
                    </div>
                  </div>

                  <!-- 第三段 -->
                  <div class="title">使用及维修信息</div>
                  <div class="panel" style="flex-direction: column">
                    <div class="flex">
                      <div
                        class="flex"
                        style="flex: 1"
                        v-if="pageType === 'view'"
                      >
                        <div
                          class="img-box img-box1"
                          :class="{
                            hasUpdate: changedFields.includes(
                              'male_defecation_visits'
                            ),
                          }"
                        >
                          <img
                            src="@/assets/images/gonggongcesuo/ci-blue.png"
                            alt=""
                          />
                          <span class="title">男大便次数</span>
                          <span class="num">{{
                            formData.male_defecation_visits
                          }}</span>
                        </div>
                        <div
                          class="img-box img-box1"
                          :class="{
                            hasUpdate: changedFields.includes(
                              'male_urination_visits'
                            ),
                          }"
                        >
                          <img
                            src="@/assets/images/gonggongcesuo/ci-blue.png"
                            alt=""
                          />
                          <span class="title">男小便次数</span>
                          <span class="num">{{
                            formData.male_urination_visits
                          }}</span>
                        </div>
                        <div
                          class="img-box img-box1"
                          :class="{
                            hasUpdate: changedFields.includes(
                              'female_usage_visits'
                            ),
                          }"
                        >
                          <img
                            src="@/assets/images/gonggongcesuo/ci-blue.png"
                            alt=""
                          />
                          <span class="title">女厕使用人次</span>
                          <span class="num">{{
                            formData.female_usage_visits
                          }}</span>
                        </div>
                      </div>
                      <div style="width: 34%" v-else>
                        <el-form-item
                          label="男大便次数"
                          style="max-width: none"
                        >
                          <el-input-number
                            :min="null"
                            :max="99999"
                            :step="1"
                            :precision="0"
                            :controls="false"
                            placeholder="输入数量"
                            v-model="formData.male_defecation_visits"
                            :class="{
                              hasUpdate: changedFields.includes(
                                'male_defecation_visits'
                              ),
                            }"
                          />
                        </el-form-item>

                        <el-form-item
                          label="男小便次数"
                          style="max-width: none"
                        >
                          <el-input-number
                            :min="null"
                            :max="99999"
                            :step="1"
                            :precision="0"
                            :controls="false"
                            placeholder="输入数量"
                            v-model="formData.male_urination_visits"
                            :class="{
                              hasUpdate: changedFields.includes(
                                'male_urination_visits'
                              ),
                            }"
                          />
                        </el-form-item>
                        <el-form-item
                          label="女厕使用人次"
                          style="max-width: none"
                        >
                          <el-input-number
                            :min="null"
                            :max="99999"
                            :step="1"
                            :precision="0"
                            :controls="false"
                            placeholder="输入数量"
                            v-model="formData.female_usage_visits"
                            :class="{
                              hasUpdate: changedFields.includes(
                                'female_usage_visits'
                              ),
                            }"
                          />
                        </el-form-item>
                      </div>
                      <div
                        :style="{ width: pageType === 'view' ? '50%' : '66%' }"
                      >
                        <el-form-item
                          label="保洁形式"
                          style="width: 50%; max-width: none"
                        >
                          <el-select
                            v-model="formData.cleaning_type"
                            placeholder="请选择"
                            :class="{
                              hasUpdate:
                                changedFields.includes('cleaning_type'),
                            }"
                          >
                            <el-option
                              v-for="item in cleaningTypeOptions"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                            />
                          </el-select>
                        </el-form-item>
                        <div class="flex">
                          <el-form-item
                            label="适老适幼儿改造"
                            style="width: 65%; max-width: none"
                          >
                            <!-- adapted_for_age_year -->
                            <el-select
                              v-model="formData.adapted_for_age_year"
                              placeholder="请选择"
                              :class="{
                                hasUpdate: changedFields.includes(
                                  'adapted_for_age_year'
                                ),
                              }"
                            >
                              <el-option
                                v-for="item in yearOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                              />
                            </el-select>
                          </el-form-item>
                          <el-form-item label="水费" style="width: 35%">
                            <el-select
                              v-model="formData.water_fee"
                              placeholder="请选择"
                              :class="{
                                hasUpdate: changedFields.includes('water_fee'),
                              }"
                            >
                              <el-option label="不缴费" value="不缴费" />
                              <el-option
                                label="独立局账户"
                                value="独立局账户"
                              />
                              <el-option
                                label="独立普环账户"
                                value="独立普环账户"
                              />
                              <el-option label="其他单位" value="其他单位" />
                            </el-select>
                          </el-form-item>
                        </div>
                        <div class="flex">
                          <el-form-item
                            label="最近一次维修、装修年份"
                            style="width: 65%; max-width: none"
                          >
                            <el-select
                              v-model="formData.last_renovation_year"
                              placeholder="请选择"
                              :class="{
                                hasUpdate: changedFields.includes(
                                  'last_renovation_year'
                                ),
                              }"
                            >
                              <el-option
                                v-for="item in yearOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                              />
                            </el-select>
                          </el-form-item>

                          <el-form-item label="电费" style="width: 35%">
                            <el-select
                              v-model="formData.electric_fee"
                              placeholder="请选择"
                              :class="{
                                hasUpdate:
                                  changedFields.includes('electric_fee'),
                              }"
                            >
                              <el-option label="不缴费" value="不缴费" />
                              <el-option
                                label="独立局账户"
                                value="独立局账户"
                              />
                              <el-option
                                label="独立普环账户"
                                value="独立普环账户"
                              />
                              <el-option label="其他单位" value="其他单位" />
                            </el-select>
                          </el-form-item>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </el-form>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
    <CustomDialog ref="customDialogRef" @confirm="handleDeleteConfirm" />
  </el-drawer>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import { departmentsPermissions } from "@/api";
import { ElMessage, ElMessageBox } from "element-plus";
import StationMap from "./stationMap.vue";
import {
  ownershipOptions,
  typeOptions,
  managementModeOptions,
  attributeOptions,
  toiletRelationOptions,
  toiletLevelOptions,
  wasteTreatmentOptions,
  usageStatusOptions,
  hotWaterOptions,
  airConditioningOptions,
  rollerShutterOptions,
  cleaningTypeOptions,
} from "../../options";
import {
  publicToiletsAdd,
  publicToiletsDelete,
  publicToiletsUpdate,
} from "@/api/public_toilets";
import { streetsList, operatorsList, getCommittees } from "@/api/index";
import CustomDialog from "@/components/customDialog.vue";

defineOptions({
  name: "StationDrawer",
});
const baseUrl = ref(import.meta.env.VITE_BASE_URL);
const pageType = ref("view"); // 是否编辑 add edit view
const visible = ref(false); // 是否显示
const stationMapRef = ref(null); // 地图组件引用
const currentRow = ref({}); // 当前行
const customDialogRef = ref(null); // 自定义弹框引用
const streetOptions = ref([]); // 街道选项
const committeeOptions = ref([]); // 居委区域选项
const operatorOptions = ref([]); // 运营单位选项
const startTime = ref(""); // 开始时间
const endTime = ref(""); // 结束时间
const changedFields = ref([]); // 修改的字段
const auditType = ref(0); // 是否审核 1 未审核 2 已审核 0其他
const openType = ref(null); // 打开弹框时的类型
const emit = defineEmits(["refresh"]);
const yearOptions = computed(() => {
  let years = [];
  // 从 1990 年到当前年份
  let currentYear = new Date().getFullYear();
  for (let year = 1990; year <= currentYear; year++) {
    years.push({ label: year.toString(), value: year });
  }
  return years.concat({ label: "未知", value: "未知" });
});
onMounted(() => {
  streetsList({}).then((res) => {
    if (res.code == 0) {
      streetOptions.value = res.data || [];
    }
  });
  operatorsList({ project_id: 1 }).then((res) => {
    if (res.code == 0) {
      operatorOptions.value = res.data || [];
    }
  });
});
const formData = ref({
  id: null, // 主键ID
  street_id: null, // 所属街道
  committee_id: null,
  photos: [], // 照片 ['1','2']
  address: null, // 地址
  longitude: null, // 经度
  latitude: null, // 纬度
  alias_name: null, // 站点名称
  service_hours: null, // 服务时间
  name: null, // 站点名称
  ownership: null, // 所有归属权
  type: null, // 类型
  implement_date: null, // 启用日期
  building_area: null, // 公共厕所建筑面积
  toilet_cost: null, // 公共厕所造价
  toilet_relation: null, // 公共厕所类型
  toilet_level: null, // 公共厕所等级
  usage_status: null, // 使用情况
  management_mode: null, // 管理形式
  charging: null, // 收费情况
  operator_type: null, // 单位分类
  waste_treatment: [], // 污物处理形式
  accessible: null, // 无障碍设置
  has_universal_wc: null, // 有无通用厕间
  hot_water: null, // 热水装置
  air_conditioning: null, // 空调配置
  has_20min_parking_sign: null, // 有无20分钟临停标志
  is_trench_flush: null, // 是否为沟槽冲水
  roller_shutter: null, // 卷帘门
  has_third_wc: null, // 是否有第三卫生间
  third_wc_location: null, // 第三卫生间位置
  third_wc_detail: null, // 第三卫生间具体设施
  male_defecation_visits: null, //  男大便次数
  cleaning_type: null, // 保洁形式
  male_urination_visits: null, // 男小便次数
  adapted_for_age_year: null, // 适老适幼儿改造
  female_usage_visits: null, // 女厕使用人次
  last_renovation_year: null, // 最近一次维修、装修
  operator_company: null, // 运营单位
  operator_id: null, // 运营单位ID
  location_category: null, //公共厕所所在位置
  planning_permit: null, //规划许可
  universal_wc_count: null, //通用厕所数量
  feces_direction: null, //粪便走向
  water_fee: null, //水费
  electric_fee: null, //电费
  attribute: null, //规划
});

const openDrawer = (row, type = "view", audit = 0) => {
  console.log(type, "type");
  pageType.value = type;
  openType.value = type;
  auditType.value = audit;
  currentRow.value = row;
  if (row) {
    // 如果formData.street_id，则获取居委区域
    if (row.street_id) {
      handleStreetChange(row.street_id);
    }

    formData.value = { ...row };
    if (typeof row.changed_fields === "object" && audit == 1) {
      changedFields.value = Object.keys(row.changed_fields);
    } else {
      changedFields.value = [];
    }
    console.log(changedFields.value, "变更的项-changedFields");

    // 解析时间段数据
    parseTimeRange(row.service_time_range);
  } else {
    formData.value = {
      id: null, // 主键ID
      street_id: null, // 所属街道
      committee_id: null,
      photos: [], // 照片 ['1','2']
      address: null, // 地址
      longitude: null, // 经度
      latitude: null, // 纬度
      alias_name: null, // 站点名称
      service_hours: null, // 服务时间
      name: null, // 站点名称
      ownership: null, // 所有归属权
      type: null, // 类型
      implement_date: null, // 启用日期
      building_area: null, // 公共厕所建筑面积
      toilet_cost: null, // 公共厕所造价
      toilet_relation: null, // 公共厕所类型
      toilet_level: null, // 公共厕所等级
      usage_status: null, // 使用情况
      management_mode: null, // 管理形式
      charging: null, // 收费情况
      operator_type: null, // 单位分类
      waste_treatment: [], // 污物处理形式
      accessible: null, // 无障碍设置
      has_universal_wc: null, // 有无通用厕间
      hot_water: null, // 热水装置
      air_conditioning: null, // 空调配置
      has_20min_parking_sign: null, // 有无20分钟临停标志
      is_trench_flush: null, // 是否为沟槽冲水
      roller_shutter: null, // 卷帘门
      has_third_wc: null, // 是否有第三卫生间
      third_wc_location: null, // 第三卫生间位置
      third_wc_detail: null, // 第三卫生间具体设施
      male_defecation_visits: null, //  男大便次数
      cleaning_type: null, // 保洁形式
      male_urination_visits: null, // 男小便次数
      adapted_for_age_year: null, // 适老适幼儿改造
      female_usage_visits: null, // 女厕使用人次
      last_renovation_year: null, // 最近一次维修、装修
      operator_company: null, // 运营单位
      operator_id: null, // 运营单位ID
      location_category: null, //公共厕所所在位置
      planning_permit: null, //规划许可
      universal_wc_count: null, //通用厕所数量
      feces_direction: null, //粪便走向
      water_fee: null, //水费
      electric_fee: null, //电费
      attribute: null, //规划
    };
    // 重置时间选择器
    startTime.value = "";
    endTime.value = "";
  }
  visible.value = true;
};

const handleClose = () => {
  visible.value = false;
};

const onSubmit = () => {
  let o = {
    ...formData.value,
  };
  let api = publicToiletsAdd;
  if (currentRow.value?.id) {
    api = publicToiletsUpdate;
    o.id = currentRow.value?.id;
  }
  api(o)
    .then((res) => {
      if (res.code == 0) {
        ElMessage.success("操作成功");
        handleClose();
        // 刷新列表
        emit("refresh");
      }
    })
    .catch(() => {
      ElMessage.error("操作失败");
    });
};

// 编辑
const handleEdit = (type) => {
  if (type) {
    pageType.value = type;
    return;
  }
  console.log(pageType.value, "type");
  // 点击取消按钮
  if (pageType.value == "add") {
    handleClose();
    return;
  } else if (pageType.value == "edit") {
    if (openType.value == "edit") {
      handleClose();
      return;
    }
    pageType.value = "view";
  } else if (pageType.value == "view") {
    handleClose();
  }
};

// 上传图片
const handleAvatarSuccess = (res, file) => {
  console.log(res, file);
  file.url = res.data.url;
  if (res.code == 0) {
    // formData.value.photos.push(res.data.url);
  }
};

// 删除图片
const handleDeletePhoto = (item) => {
  formData.value.photos = formData.value.photos.filter((i) => i !== item);
};

// 删除
const handleDelete = () => {
  customDialogRef.value.openDialog("del");
};

const handleDeleteConfirm = () => {
  console.log("执行删除逻辑");
  publicToiletsDelete({ id: currentRow.value.id }).then((res) => {
    if (res.code == 0) {
      ElMessage.success("删除成功");
      handleClose();
      // 刷新列表
      emit("refresh");
    }
  });
};

// 查找地址
const handleFindAddress = () => {
  let address = formData.value.address;
  if (!address) {
    ElMessage.error("请输入地址");
    return;
  }
  stationMapRef.value.setAddress(address);
};

// 处理位置
const handleLocation = (location) => {
  console.log(location, "location 厕所 子组件传过来的经纬度");
  formData.value.longitude = location.lng;
  formData.value.latitude = location.lat;
};

// 处理时间变化
const handleTimeChange = () => {
  if (startTime.value && endTime.value) {
    formData.value.service_time_range = `${startTime.value}-${endTime.value}`;
  } else {
    formData.value.service_time_range = null;
  }
};

// 解析时间段数据
const parseTimeRange = (timeRange) => {
  if (!timeRange) {
    startTime.value = null;
    endTime.value = null;
    return;
  }

  const parts = timeRange.split("-");
  console.log(parts, "parts");
  if (parts.length === 2) {
    startTime.value = parseTime(parts[0].trim()) ? parts[0].trim() : "";
    endTime.value = parseTime(parts[1].trim()) ? parts[1].trim() : "";
  } else {
    startTime.value = "";
    endTime.value = "";
  }
};

// 解析单个时间是否满足 HH:mm 格式
const parseTime = (time) => {
  if (!time) {
    return false;
  }
  return /^([01]\d|2[0-3]):([0-5]\d)$/.test(time);
};

// 街道选择改变
const handleStreetChange = (value) => {
  console.log(value, "value");
  formData.value.committee_id = null;
  if (value) {
    committeeOptions.value = [];
    getCommittees({ street_id: value }).then((res) => {
      if (res.code == 0) {
        committeeOptions.value = res.data || [];
      }
    });
  }
};

defineExpose({
  openDrawer,
});
</script>

<style scoped lang="scss">
@use "./station.scss" as *;
@use "../../index.scss" as *;
.time-range-input {
  display: flex;
  align-items: center;
  gap: 8px;

  .time-separator {
    color: #606266;
    font-weight: 500;
  }
}
</style>
